<template>
  <div>
    <div class="titletopXX">
      <van-nav-bar
        size="30"
        :title="title"
        left-arrow
        right-text=""
        :fixed="true"
        @click-left="onClickLeft"
      />
    </div>
    <van-pull-refresh
      class="pull-refresh"
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <van-empty
        v-if="list.length == 0 && !error"
        image="search"
        description="未找到数据"
      />
      <van-empty v-if="error" image="error" description="网络错误" />
      <van-list
        :immediate-check="false"
        v-model:loading="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 列表内容 -->
        <div class="ulbox" v-if="list.length > 0">
          <div class="ul" v-for="(item, index) in list" :key="index">
            <div class="li" style="align-items: center">
              <div class="li_left">
                <van-image
                  class="img"
                  radius="4"
                  width="90"
                  height="90"
                  :src="item.image"
                  mode=""
                >
                </van-image>
              </div>
              <div
                class="li_right"
                style="display: flex; flex-direction: column"
              >
                <div @click="TZBtn(item)">
                  <div class="minWidth200 flextitle">
                    <div class="TT">
                      {{ item.name }}
                    </div>
                    <van-icon
                      name="edit"
                      size="24px"
                      color="rgb(2, 117, 113)"
                      @click.stop="YYXX(item)"
                    />
                    <van-icon
                      style="padding-left: 10px"
                      name="eye-o"
                      size="24px"
                      color="rgb(2, 117, 113)"
                      @click.stop="jumpToDetail(item)"
                    />
                  </div>
                  <div class="WZ_size_20 XX">
                    <!-- <van-icon name="location" size="20" /> -->
                    <div class="WZ_size_10">取餐日期：{{ item.numTime }}</div>
                    <div class="WZ_size_10">
                      接龙开始时间：{{ item.startTime }}
                    </div>
                    <div class="WZ_size_10">
                      接龙结束时间：{{ item.endTime }}
                    </div>
                  </div>
                </div>

                <!-- <div class="li_right_btn" @click="YYXX(item)">立即预约</div> -->
              </div>
            </div>
          </div>
        </div>
        <template #error>
          <div class="error-tip" @click="retryLoad">
            <van-icon name="warning" />
            <span>加载失败，点击重试</span>
          </div>
        </template>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import headerXX from "../../../../components/title.vue";
import { queryMealBackList } from "@/api/realAssets/icsharedstation/CPXX/index.js";
export default {
  components: { headerXX },
  data() {
    return {
      title: JSON.parse(localStorage.getItem("siteData")).siteName,
      siteData: JSON.parse(localStorage.getItem("siteData")),
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      error: false, // 控制错误状态
      XXyz: {
        siteId: JSON.parse(localStorage.getItem("siteData")).id,
        pageNumber: 1,
        pageSize: 10,
      },
    };
  },
  created() {},
  mounted() {
    this.onLoad();
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        name: "rvicsharedstation-HT_index",
      });
    },
    //点击修改
    YYXX(val) {
      localStorage.setItem("CPGLxx", JSON.stringify(val));
      this.$router.push({
        name: "rvicsharedstation-HT_ZGST_SetCP",
      });
    },
    TZBtn(item) {
      localStorage.setItem("CPGLxx", JSON.stringify(item));
      this.$router.push({
        name: "rvicsharedstation-HT_ZGST_indexbrn",
      });
    },
    //跳转到详情
    jumpToDetail(item) {
      let li = encodeURIComponent(JSON.stringify(item));
      // console.log(li);
      // 首选方案：使用路由state传递
      this.$router.push({
        name: "rvicsharedstation-HT_ZGST_companyMessage",
        query: {
          XX: li, // 序列化对象
        },
      });
    },
    // 加载数据
    onLoad() {
      this.loading = true;
      if (this.error) return; // 如果当前是错误状态，不自动触发加载
      if (this.refreshing) {
        this.list = [];
      }
      queryMealBackList(this.XXyz).then((res) => {
        if (res.resultMessage != "SUCCESS") {
          this.list = [];
          this.error = true; // 显示错误提示
          // loading.value = false;
        } else if (res.data.length == 0) {
          this.list = [];
          this.finished = true;
        } else {
          this.list = [...this.list, ...res.data];
        }
        console.log(this.list);
        this.loading = false;
        // 判断是否已加载完所有数据
        if (this.list.length == res.pageNum) {
          this.finished = true;
        } else {
          this.XXyz.pageNumber++;
        }
        this.refreshing = false;
      });
    },
    // 点击重试
    retryLoad() {
      this.XXyz.pageNumber = 1;
      this.XXyz.pageSize = 10;
      this.finished = false;
      this.error = false;
      this.loading = true;
      this.refreshing = true;
      this.onLoad();
    },
    // 下拉刷新
    onRefresh() {
      //   list.value = [];
      this.XXyz.pageNumber = 1;
      this.XXyz.pageSize = 10;
      this.finished = false;
      this.error = false;
      this.loading = true;
      this.refreshing = true;
      this.onLoad();
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../../../static/css/index.less";
@import "../../../../static/css/GYcSS.less";
.li_right {
  margin-left: 0px !important;
  width: calc(100% - 90px) !important;
}
.TT {
  color: rgb(2, 117, 113);
  font-weight: 600;
  font-size: 16px;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.JJ {
  display: -webkit-box;
  font-size: 9px;
  line-height: 10px;
  height: 23px;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #82848a;
}
.XX {
  margin-top: 10px;
  color: rgb(115, 116, 120);
  line-height: 18px;
}
.flextitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.titletopXX {
  height: 45px;
}
</style>